<template>
<van-action-sheet
    class="cp_container"
    v-model="show" 
    title="选择集团"
    cancel-text="取消"
    close-on-click-action
    @cancel="onCancel">
    <div class="container">
        <!-- <van-search 
            v-model="queryParams.customerPhone" 
            shape="round" 
            placeholder="请输入集团名称"
            input-align="center"
            @search="()=>{
                queryParams.page = 0;
                getDataList();
            }"/> -->
        <div class="list_container">
            <van-list
                v-model="loading"
                :finished="finished"
                :error="error"
                error-text="请求失败"
                :finished-text="flattenTwoList(pageData).length==0?'什么也没找到':'没有更多了'"
                @load="getDataList"
                :immediate-check="false">
                <div
                    class="item"
                    v-for="(item,index) in flattenTwoList(pageData)"
                    :key="index"
                    :index='index'
                    @click="onChange(item.customerName)">
                    {{item.customerName}}-{{item.customerPhone}}
                </div>
            </van-list>
        </div>
    </div>
</van-action-sheet>
</template>
<script>
//选择集团组件
import {flattenTwoList} from "@/common/OtherTools";
export default {
    name:"DataInfoDialog",
    data(){
        return {
            show:false,
            loading: false,
            finished:false,
            error:false,
            pageData:[],
            queryParams: {  //查询条件
                page: 0,
                size: 100,
                customerPhone:'',
            },
        };
    },
    methods:{
        flattenTwoList,
        onCancel(){
            this.$emit('change','');
            this.show = false;
        },
        onChange(name){
            this.$emit('change',name);
            this.show = false;
        },
        initData({show=true}={}){
            this.pageData=[];
            this.getDataList();
            this.show = show;
        },
        getDataList(){
            this.queryParams.page++;
            this.loading = true;
            this.finished = false;
            this.$Api.getCustomers(
                this.queryParams,
            ).then((res) => {
                this.error = false;
                let dataList = res.data.list;
                this.queryParams.page = res.data.page;
                this.$set(this.pageData,this.queryParams.page-1,dataList);  //索引必须是页数减一
                this.pageData.length = this.queryParams.page;  //数组的长度必须和页数对应
                this.total = res.data.totalSize;
                if(this.queryParams.page >= res.data.totalPage){  //如果是最后一页
                    this.finished = true;
                }
            }).catch(res=>{
                this.queryParams.page--;
                this.error = true;
                this.$notify({
                    type: 'danger',
                    message: res.msg,
                    duration: 1000,
                });
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
}
</script>
<style lang='scss' scoped>
.cp_container{
    width: 100%;
    .container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        /deep/ .van-search {
            padding: 5px 0 !important;
            background-color: rgb(243, 240, 240);
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
         /deep/ .van-search__content {
            background-color: rgb(243, 240, 240);
        }
        /deep/.van-list{
            display: grid;
            grid-gap: 5px;
        }
        .list_container{
            max-height: 50vh;
            width: 100%;
            border-radius: 5px;
            background-color: rgb(247, 244, 244);
            overflow: auto;
            .item{
                width: 100%;
                padding: 10px;
                font-size: 17px;
                text-align: center;
                box-sizing: border-box;
                border-bottom: 1px solid #ffffff;
            }
        }
    }
}
</style>